<template>
  <div style="height:100%;">
    <div class="message-body">
      <div v-loading="loading" class="message-content d-flex">
        <div class="message-body-side">
          <div class="header d-flex align-items-center">
            <img src="@/assets/img/crm/todo.png" class="title-icon" />
            <span class="title ml-10">待办</span>
          </div>
          <div class="menu-side menu-side-left">
            <xr-menu-item
              v-for="(item, index) in showLeftSides"
              :key="index"
              :label="item.name"
              :num="item.num"
              :icon-class="item.iconClass"
              :select="leftType == item.infoType"
              @click.native="sideClick(item)"
            />
          </div>
        </div>
        <div class="message-body-content flex-1">
          <div>
            <div
              class="title d-flex align-items-center"
              v-for="(item, ind) in leftSides"
              :key="ind"
              :style="{ display: leftType != item.infoType ? 'none !important' : 'flex !important' }"
            >
              <img :src="require('@/assets/router/' + item.src)" alt="" />
              <span class="ml-10">{{ item.name }}</span>
            </div>
          </div>
          <div>
            <c-r-m-table-bar
              v-for="(it, i) in showLeftSides"
              v-show="leftType == it.infoType"
              :key="i"
              :crm-type="it.crmType"
              :info-type="it.infoType"
              :info-title="it.name"
              :info-tips="it.tips"
              :model="it.model"
              :show="leftType == it.infoType"
              :icon-data="it"
              @change="tableBarChange"
              style="margin: 0;"
            />
          </div>
          <c-r-m-message
            ref="tabContent"
            v-for="(item, index) in showLeftSides"
            v-show="leftType == item.infoType"
            :key="index"
            :crm-type="item.crmType"
            :info-type="item.infoType"
            :info-title="item.name"
            :info-tips="item.tips"
            :model="item.model"
            :show="leftType == item.infoType"
            :icon-data="item"
            @on-handle="messageHandle"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CRMMessage from "./compenents/CRMMessage"; // 系统消息
import CRMTableBar from "./compenents/CRMTableBar.vue";
import { mapGetters } from "vuex";
import { objDeepCopy } from "@/utils";
import XrMenuItem from "@/components/XrMenu/XrMenuItem";
import { crmMessagNumAPI } from "@/api/crm/message";
export default {
  /** 学员管理 的 消息列表 */
  name: "Message",

  components: {
    CRMMessage,
    XrMenuItem,
    CRMTableBar
  },

  data() {
    return {
      loading: false,
      leftType: "",
      /**
       * model 1今日需联系学员 2分配给我的线索 3分配给我的学员 4待进入公海的学员 5待审核合同 6待审核回款 7待回款提醒 8即将到期的合同 9待回访合同 10待审核发票，11,待审核退款，12代办理入学学员，13待审批ROI，14代办理退学学员
       */
      leftSides: [
        // {
        //   name: '今日需联系线索',
        //   crmType: 'leads',
        //   color: '#c623fb',
        //   iconClass: 'wk wk-leads',
        //   infoType: 'todayLeads',
        //   model: 11,
        //   num: 0,
        //   tips: '下次跟进时间为今日的线索',
        //   hidden: true
        // },
        // {
        //   name: "今日需联系学员",
        //   crmType: "customer",
        //   color: "#2362FB",
        //   iconClass: "wk wk-customer",
        //   infoType: "todayCustomer",
        //   model: 1,
        //   num: 0,
        //   tips: "下次跟进时间为今日的学员",
        //   hidden: true
        // },
        // {
        //   name: '今日需联系商机',
        //   crmType: 'business',
        //   color: '#fb9323',
        //   iconClass: 'wk wk-business',
        //   infoType: 'todayBusiness',
        //   model: 12,
        //   num: 0,
        //   tips: '下次跟进时间为今日的商机',
        //   hidden: true
        // },
        // {
        //   name: "分配给我的线索",
        //   crmType: "leads",
        //   color: "#704AFD",
        //   iconClass: "wk wk-leads",
        //   infoType: "followLeads",
        //   model: 2,
        //   num: 0,
        //   tips: "转移之后未跟进的线索",
        //   hidden: true
        // },
        // {
        //   name: "分配给我的学员",
        //   crmType: "customer",
        //   color: "#19B5F6",
        //   iconClass: "wk wk-s-seas",
        //   infoType: "followCustomer",
        //   model: 3,
        //   num: 0,
        //   tips: "转移、领取、分配之后未跟进的学员，默认显示自己负责的学员",
        //   hidden: true
        // },
        // {
        //   name: "待进入公海的学员",
        //   crmType: "customer",
        //   color: "#26D4DA",
        //   iconClass: "wk wk-seas",
        //   infoType: "putInPoolRemind",
        //   model: 4,
        //   num: 0,
        //   tips: "",
        //   hidden: true
        // },
        {
          name: "待审核合同",
          crmType: "contract",
          color: "#FD5B4A",
          iconClass: "wk wk-contract",
          infoType: "checkContract",
          model: 5,
          num: 0,
          tips: "",
          hidden: true,
          src: "contract_select.svg"
        },
        {
          name: "待审核回款",
          crmType: "receivables",
          color: "#FFB940",
          iconClass: "wk wk-receivables",
          infoType: "checkReceivables",
          model: 6,
          num: 0,
          tips: "",
          hidden: true,
          src: "receivables_select.svg"
        },
        {
          name: "待审核退款",
          crmType: "refund",
          color: "#ff9232",
          iconClass: "wk wk-receivables",
          infoType: "refundnum",
          model: 14,
          num: 0,
          tips: "",
          hidden: true,
          src: "refund_select.svg"
        }
        // {
        //   name: '待回款提醒',
        //   crmType: 'receivables_plan',
        //   color: '#27BA4A',
        //   iconClass: 'wk wk-bell',
        //   infoType: 'remindReceivablesPlan',
        //   model: 7,
        //   num: 0,
        //   tips: '',
        //   hidden: true
        // },
        // {
        //   name: '即将到期的合同',
        //   crmType: 'contract',
        //   color: '#FF7A38',
        //   iconClass: 'wk wk-contract',
        //   infoType: 'endContract',
        //   model: 8,
        //   num: 0,
        //   tips: '根据“合同到期时间”及设置的“提前提醒天数”提醒',
        //   hidden: true
        // },
        // {
        //   name: '待回访合同',
        //   crmType: 'contract',
        //   color: '#ff9232',
        //   iconClass: 'wk wk-house',
        //   infoType: 'returnVisitRemind',
        //   model: 9,
        //   num: 0,
        //   tips: '',
        //   hidden: true
        // },
        // {
        //   name: '待审核发票',
        //   crmType: 'invoice',
        //   color: '#ff9232',
        //   iconClass: 'wk wk-invoice',
        //   infoType: 'checkInvoice',
        //   model: 10,
        //   num: 0,
        //   tips: '',
        //   hidden: true
        // },
        // {
        //   name: "待办理入学学员",
        //   crmType: "enrolledCustomer",
        //   color: "#ff9232",
        //   iconClass: "wk wk-invoice",
        //   infoType: "enrollednum",
        //   model: 15,
        //   num: 0,
        //   tips: "",
        //   hidden: true
        // },
        // {
        //   name: "待办理停课学员",
        //   crmType: "suspendClassesCustomer",
        //   color: "#ff9232",
        //   iconClass: "wk wk-invoice",
        //   infoType: "suspendClassesNum",
        //   model: 17,
        //   num: 0,
        //   tips: "",
        //   hidden: true
        // },
        // {
        //   name: "待办理退学学员",
        //   crmType: "dropoutCustomer",
        //   color: "#ff9232",
        //   iconClass: "wk wk-invoice",
        //   infoType: "dropoutnum",
        //   model: 16,
        //   num: 0,
        //   tips: "",
        //   hidden: true
        // },

        // {
        //   name: "待审批ROI",
        //   crmType: "roiMoney",
        //   color: "#ff9232",
        //   iconClass: "wk wk-invoice",
        //   infoType: "checkRoi",
        //   model: 13,
        //   num: 0,
        //   tips: "",
        //   hidden: true
        // }
      ]
    };
  },

  computed: {
    ...mapGetters(["messageNum"]),
    showLeftSides() {
      return this.leftSides.filter(item => {
        return !item.hidden;
      });
    }
  },

  watch: {
    /** 变化就刷新数据 */
    messageNum() {
      this.refreshNum();
    }
  },

  mounted() {
    this.getNumber();
    this.refreshNum();
    /** 控制table的高度 */
    window.onresize = () => {
      var offsetHei = document.documentElement.clientHeight;
      this.$bus.emit("message-scroll", offsetHei - 300);
    };
  },

  methods: {
    getNumber() {
      crmMessagNumAPI().then(response => {
        this.$store.commit("SET_MESSAGENUM", response.data);
      });
    },
    /**
     * 刷新消息数据
     */
    refreshNum() {
      for (let index = 0; index < this.leftSides.length; index++) {
        const element = this.leftSides[index];
        if (this.messageNum.hasOwnProperty(element.infoType)) {
          element.num = this.messageNum[element.infoType] || 0;
          element.hidden = false;
        } else {
          element.hidden = false;
        }
      }

      if (!this.leftType && this.showLeftSides.length > 0) {
        this.leftType = this.showLeftSides[0].infoType;
      }
    },

    /**
     * 消息页面点击操作
     */
    messageHandle(data) {
      if (data.type == "follow") {
        const copyNum = objDeepCopy(this.messageNum);
        const num = parseInt(copyNum[data.infoType]) - data.value;
        copyNum[data.infoType] = num > 0 ? num : 0;
        this.$store.commit("SET_MESSAGENUM", copyNum);
      }
    },

    /**
     * 侧边点击
     */
    sideClick(item) {
      console.log(item);
      this.leftType = item.infoType;
    },

    /**
     * 搜索点击
     */
    tableBarChange(obj) {
      this.$refs.tabContent.forEach((item, index) => {
        if (item.show) {
          item.filterObj = obj.filterObj;
          item.isSubType = obj.isSubType;
          item.optionsType = obj.optionsType;
          item.refreshList();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.message-header {
  margin-left: 28px;
  height: 60px;
  .title-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
  }
}
.message-body {
  position: relative;
  height: 100%;
}
.message-content {
  height: 100%;
  // display: box !important;
}

.message-body-side {
  padding: 16px;
  width: 284px;
  font-size: 14px;
  background-color: white;
  border-right: 1px solid #ebebeb;
  .header {
    .title-icon {
      width: 20px;
      height: 20px;
      border-radius: 2px;
    }
    .title {
      font-size: 14px;
      font-weight: bold;
      color: #333333;
    }
  }
  .menu-side {
    margin-top: 20px;
    width: 254px;
    height: calc(100% - 50px);
    background: #f5f6fb;
    border-radius: 4px;
    overflow-y: auto;
  }
  .side-item {
    position: relative;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    font-size: 13px;
    cursor: pointer;
    i {
      color: #999;
    }
  }
}
.message-body-content {
  height: 100%;
  overflow: hidden;
  background-color: white;
  .title {
    padding: 16px 16px 0 16px;
    color: #333;
    font-weight: bold;
    font-size: 14pxs;
  }
}
.option-bar {
  padding: 16px;
  margin-bottom: 16px;
  background: #ffffff;
}

/** 勾选操作 */
.selection-bar {
  font-size: 12px;
  height: 35px;
  color: #777;

  .selected—title {
    flex-shrink: 0;
    padding-right: 20px;
    color: #333;
    .selected—count {
      color: $xr-color-primary;
    }
  }
}
</style>
<style>
  .menu-side-left .el-badge{
    top: 11px !important;
  }
</style>
